<template>
  <div class="duty-list">
    <div class="screen_box">
      <div class="select_box">
        <div class="select_li">
          <el-select v-model="yearData" placeholder="请选择" size="mini" @change="selectTime('year')" value-key="year">
            <el-option v-for="item in yearOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select
            v-model="monthData"
            placeholder="请选择"
            size="mini"
            @change="selectTime('month')"
            v-if="['2', '4'].includes(firstType)">
            <el-option
              v-for="item in monthOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li" v-if="['2', '4'].includes(firstType)">
          <div>状态：</div>
          <el-select v-model="statusData" placeholder="请选择" size="mini" @change="selectStatus">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="screen_btn" v-if="['1', '2'].includes(firstType)">
        <template v-if="firstType === '1'">
          <el-button
            type="primary"
            plain
            size="small"
            @click="goSubmit('0')"
            v-if="activeInfo && activeInfo.saveStatus !== '1'">
            暂 存
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="goSubmit('1')"
            v-if="activeInfo && activeInfo.saveStatus !== '1'">
            确认提交
          </el-button>
          <el-button type="primary" size="small" @click="goExport">导出</el-button>
        </template>
        <template v-else>
          <el-button type="primary" size="small" @click="exportAll">全部导出</el-button>
        </template>
      </div>
    </div>
    <div class="list_con" v-if="listData.length">
      <div class="infor_left">
        <el-scrollbar class="info_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="{ is_select: activeInfo.id === item.id }"
              @click="lookOne(item)"
              v-for="item in listData"
              :key="item.id">
              <div class="one_con">
                <div class="info_text">{{ item.overtimeTitle }}</div>
                <template v-if="firstType === '0' || firstType === '4'">
                  <div class="info_status">
                    {{ ['1'].includes(item.saveStatus) ? '已提交' : '未提交' }}
                  </div>
                </template>
                <div class="info_status" v-else>
                  {{ ['0', '-1'].includes(item.saveStatus) ? '待确认' : '已确认' }}
                </div>
              </div>
              <div class="one_con con_bottom">
                <div class="info_org">{{ item.orgName }}</div>
                <div class="info_time">{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-pagination
          background
          layout="pager,total"
          :current-page="pagenation.currentPage"
          :page-size="pagenation.pageSize"
          :total="pagenation.totalSize"
          @current-change="onPageChange"
          hide-on-single-page
          :pager-count="5"></el-pagination>
      </div>

      <div class="infor_right">
        <list-detail
          :firstType="firstType"
          :activeInfo="activeInfo"
          :memberList="member"
          @addSuccess="addSuccess"
          ref="listDetail"
          v-if="firstType === '0' || firstType === '4'"></list-detail>
        <list-detail-confirm
          :firstType="firstType"
          :activeInfo="activeInfo"
          :memberList="member"
          @addSuccess="addSuccess"
          ref="listDetailConfirm"
          v-if="firstType === '1'"></list-detail-confirm>
        <list-detail-subsidy
          :firstType="firstType"
          :activeInfo="activeInfo"
          @review="getData"
          ref="listDetailSubsidy"
          v-if="firstType === '2'"></list-detail-subsidy>
      </div>
    </div>
    <div class="list_con" v-else>
      <div class="full_no">暂无申请数据</div>
    </div>
  </div>
</template>

<script>
import {
  getlistPreWeekendDuty,
  getlistWeekendDuty,
  getUserListByOrgId,
  getlistWeekendDutySubsidy,
} from '@apis/api-dailyManage.js'
import listDetail from './listDetail'
import listDetailSubsidy from './listDetailSubsidy.vue'
import listDetailConfirm from './listDetailConfirm'
import moment from 'moment'
import { selectYearFun } from '@utility/utility.js'
export default {
  name: 'repairList',
  components: { listDetail, listDetailSubsidy, listDetailConfirm },
  props: {
    firstType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      load: true,
      activeInfo: {},
      yearOption: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '2023',
          label: '2023年',
        },
        {
          value: '2024',
          label: '2024年',
        },
      ],
      yearData: '',
      monthOption: [
        // {
        //   value: '',
        //   label: '全部',
        // },
        {
          value: '1',
          label: '1月',
        },
        {
          value: '2',
          label: '2月',
        },
        {
          value: '3',
          label: '3月',
        },
        {
          value: '4',
          label: '4月',
        },
        {
          value: '5',
          label: '5月',
        },
        {
          value: '6',
          label: '6月',
        },
        {
          value: '7',
          label: '7月',
        },
        {
          value: '8',
          label: '8月',
        },
        {
          value: '9',
          label: '9月',
        },
        {
          value: '10',
          label: '10月',
        },
        {
          value: '11',
          label: '11月',
        },
        {
          value: '12',
          label: '12月',
        },
      ],
      monthData: moment().format('M'),
      pagenation: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      pageList: [],
      checkList: [],
      listData: [],
      statusOptions: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '0',
          label: '未提交',
        },
        {
          value: '1',
          label: '已提交',
        },
      ],
      statusData: '',
      member: [],
      selectYearFun,
    }
  },
  computed: {},
  filters: {
    formStatus(val) {
      switch (val) {
        case '0':
          return '待审批'
        case '1':
          return '审批通过'
        case '2':
          return '审批不通过'

        default:
          break
      }
    },
  },
  watch: {
    firstType(news) {
      if (news === '4') {
        this.statusOptions[1].label = '未提交'
        this.statusOptions[2].label = '已提交'
      } else if (news === '2') {
        this.statusOptions[1].label = '未确认'
        this.statusOptions[2].label = '已确认'
      }
      this.statusData = ''
      this.activeInfo = {}
      this.pagenation.currentPage = 1
      this.getData()
    },
    pageList: {
      handler(news) {
        this.listData = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.yearOption = this.selectYearFun(2023)
    this.yearOption.unshift({
      value: '',
      label: '全部',
    })
    if (this.firstType === '0' || this.firstType === '1') {
      this.getUserListByOrgId()
    }
    this.activeInfo.id = this.$route.query.id || ''
    if (this.firstType === '2') {
      this.statusOptions[1].label = '未确认'
      this.statusOptions[2].label = '已确认'
    }
    this.getData('1')
  },
  mounted() {},
  methods: {
    getData(type) {
      if (this.firstType === '0' || this.firstType === '4') {
        this.getlistPreWeekendDuty(type)
      } else if (this.firstType === '1') {
        this.getlistWeekendDuty(type)
      } else if (this.firstType === '2') {
        this.getlistWeekendDutySubsidy(type)
      }
    },
    lookOne(item) {
      this.activeInfo = item
    },
    onPageChange(e) {
      this.pagenation.currentPage = e
      this.getData()
    },
    addSuccess() {
      if (this.firstType === '0') {
        this.getlistPreWeekendDuty()
      } else {
        this.getlistWeekendDuty()
      }
    },
    getlistPreWeekendDuty(type) {
      const param = {
        id: type === '1' ? this.activeInfo.id : '',
        overtimeYear: this.yearData,
        overtimeMonth: this.firstType === '0' ? '' : this.monthData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.firstType === '0' ? this.userInfo.loginPostInfo.orgId : '',
        tenantId: localStorage.pskh_tenantId,
        saveStatus: this.statusData,
      }
      getlistPreWeekendDuty(param).then(res => {
        if (res.code === 0) {
          this.handleData(type, res.data)
        }
      })
    },
    getlistWeekendDuty(type) {
      const param = {
        id: type === '1' ? this.activeInfo.id : '',
        overtimeYear: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: this.userInfo.loginPostInfo.orgId,
        tenantId: localStorage.pskh_tenantId,
      }
      getlistWeekendDuty(param).then(res => {
        if (res.code === 0) {
          this.handleData(type, res.data)
        }
      })
    },
    selectTime(type) {
      // if (type === 'year') {
      //   this.monthOption = this.yearData.monthList
      //   this.monthData = this.monthOption[0].month
      // }
      this.pagenation.pageNum = 1
      this.getData()
    },
    selectStatus() {
      this.getData()
    },
    handleData(type, data) {
      this.pageList = data.records
      this.pagenation.totalSize = data.total
      if (this.$route.query.id && type === '1') {
        this.pagenation.currentPage = data.current
        const arr = this.pageList.filter(item => {
          return item.id === this.$route.query.id
        })
        this.activeInfo = arr[0]
        this.clearUrl()
      } else {
        let arr1 = []
        if (this.activeInfo && this.activeInfo.id) {
          const arr = this.pageList.filter(item => {
            return item.id === this.activeInfo.id
          })
          if (arr.length) {
            arr1 = arr
          }
        }
        if (arr1.length) {
          this.activeInfo = arr1[0]
        } else {
          this.activeInfo = data.records[0]
        }
      }
    },
    getUserListByOrgId() {
      getUserListByOrgId({
        orgId: this.userInfo.loginPostInfo.orgId,
      }).then(res => {
        this.member = res.data
      })
    },
    getlistWeekendDutySubsidy(type) {
      const param = {
        id: '',
        overtimeYear: this.yearData,
        overtimeMonth: this.monthData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        orgId: '',
        tenantId: localStorage.pskh_tenantId,
        saveStatus: this.statusData,
      }
      getlistWeekendDutySubsidy(param).then(res => {
        if (res.code === 0) {
          this.handleData(type, res.data)
        }
      })
    },
    goSubmit(type) {
      if (type === '1') {
        this.$confirm('确定要提交吗?请注意修改是否调休项，申请加餐补助。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$refs.listDetailConfirm.submit(type)
          })
          .catch(() => {})
      } else {
        this.$refs.listDetailConfirm.submit(type)
      }
    },
    goExport() {
      if (!this.listData.length) return
      this.$refs.listDetailConfirm.exportData()
    },
    exportAll() {
      if (!this.listData.length) return
      const data = {
        month: this.monthData,
        year: this.yearData,
        saveStatus: this.statusData,
      }
      this.$refs.listDetailSubsidy.exportData(data)
    },
    clearUrl() {
      const url = window.location.href
      const urlArr = url.split('?')
      window.history.replaceState(null, null, urlArr[0])
      this.$route.query.id = ''
      this.$route.query.flag = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.duty-list {
  height: 100%;
  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 40px;
    // border-bottom: 1px solid #efefef;
    .select_box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
          width: 150px;
        }
      }
    }
    .screen_btn {
      .el-button {
        margin-right: 20px;
      }
    }
  }
  .list_con {
    height: calc(100% - 70px);
    display: flex;
    .infor_left {
      height: calc(100% - 20px);
      width: 300px;
      min-width: 300px;
      margin: 10px;
      border: 1px solid #e5e5e5;
      .info_left {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
      .left_con_list {
        margin: 10px 0;
        padding: 0 10px;
        .infor_left_one {
          padding: 5px 8px;
          cursor: pointer;
          margin-bottom: 10px;
          background-color: #f9f9f9;
          .one_con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
            .info_text {
              font-size: 15px;
              .temp {
                color: #7497c8;
              }
              /deep/.el-checkbox__label {
                white-space: pre-wrap;
              }
            }
            .info_status {
              color: #f59a23;
              padding-left: 10px;
              white-space: nowrap;
            }
            .info_org {
              background-color: #fdeed7;
              border-radius: 4px;
              padding: 2px 6px;
              font-size: 14px;
              color: #86642c;
              word-break: keep-all;
            }
          }
          .con_bottom {
            margin-top: 20px;
          }
        }
        .is_select {
          background-color: #e4ebf0;
        }
      }
    }
    .el-pagination {
      text-align: right;
      margin-top: 10px;
    }
    .infor_right {
      height: calc(100% - 20px);
      width: calc(100% - 320px);
      margin: 10px 0;
      border: 1px solid #e5e5e5;
    }
    .full_no {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
    }
  }
}
</style>
